<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>AI TextArea - Demo</title>
	<meta name="description" content="AI-powered textarea component demonstration">

	<script src="%VITE_BUNDLE_PATH%" type="module"></script>

	<style>
		:root {
			--demo-spacing: 1rem;
			--demo-max-width: 800px;
		}

		body {
			font-family: var(--sapFontFamily, 'Helvetica Neue', Arial, sans-serif);
			background-color: var(--sapBackgroundColor, #ffffff);
			margin: 0;
			padding: var(--demo-spacing);
		}

		.demo-container {
			max-width: var(--demo-max-width);
			margin: 0 auto;
		}

		.demo-title {
			font-size: 1.5rem;
			margin-bottom: var(--demo-spacing);
			color: var(--sapTextColor);
		}

		ui5-ai-textarea {
			width: 100%;
			margin-bottom: var(--demo-spacing);
		}

		.demo-controls {
			display: flex;
			gap: 0.5rem;
			margin-bottom: var(--demo-spacing);
			flex-wrap: wrap;
		}

		.demo-info {
			background: var(--sapInfoBackground);
			border: 1px solid var(--sapInfoBorderColor);
			border-radius: 0.25rem;
			padding: 0.75rem;
			margin-top: var(--demo-spacing);
			font-size: 0.875rem;
		}
	</style>
</head>

<body>
	<div class="demo-container">
		<h1 class="demo-title">AI TextArea Component</h1>

		<ui5-ai-textarea
			id="ai-textarea"
			value="Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture."
			rows="8"
			placeholder="Write your content here...">

			<ui5-menu slot="menu" id="ai-menu"></ui5-menu>
		</ui5-ai-textarea>

		<div class="demo-controls">
			<ui5-button id="reset-btn" design="Outlined">Reset</ui5-button>
			<ui5-button id="readonly-toggle" design="Outlined">Toggle Readonly</ui5-button>
			<ui5-button id="disabled-toggle" design="Outlined">Toggle Disabled</ui5-button>
		</div>

		<div class="demo-info">
			<strong>AI TextArea Features:</strong><br>
			• Click the AI button (⚡) to open the action menu<br>
			• During generation, the AI button becomes a stop button (⏹)<br>
			• Click stop button or press Escape to cancel generation<br>
			• Version navigation appears when multiple versions exist<br><br>
			
			<strong>Keyboard Shortcuts:</strong><br>
			• Shift + F4: Focus AI button<br>
			• Ctrl + Shift + Z: Previous version (when multiple versions exist)<br>
			• Ctrl + Shift + Y: Next version (when multiple versions exist)<br>
			• Escape: Stop generation (during loading)<br><br>
			
			<strong>Generation Behavior:</strong><br>
			• Selecting a new action while generating will stop current generation<br>
			• Cancelled generations restore previous content and are not saved to history<br>
			• History is limited to 50 versions to prevent memory issues
		</div>
	</div>

	<script>
		'use strict';

		// Sample AI responses for different actions (replace with actual API responses)
		const SAMPLE_TEXTS = {
			en: "Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture, streamline the execution of new ideas, and ultimately unlock value for the organization and its customers.",
			bg: "Мениджърите по иновации действат с креативност и бизнес усет, като насърчават инициативи, които изграждат култура, благоприятстваща иновациите, улесняват реализирането на нови идеи и в крайна сметка създават стойност за организацията и нейните клиенти.",
			de: "Innovationsmanager agieren mit sowohl Kreativität als auch unternehmerischem Geschick. Sie treiben Initiativen voran, die eine innovationsfreundliche Unternehmenskultur fördern, die Umsetzung neuer Ideen optimieren und letztlich Mehrwert für das Unternehmen und seine Kunden schaffen.",
			bulleted: `Innovation managers:
• Operate with creativity and business acumen
• Drive initiatives that cultivate an innovation-friendly culture
• Streamline the execution of new ideas
• Unlock value for the organization and its customers`,
			expanded: "Innovation managers play a pivotal role in organizations by blending creativity with strategic business acumen. They are not just responsible for generating innovative ideas but also for fostering a culture that encourages experimentation, collaboration, and out-of-the-box thinking among teams. These professionals work tirelessly to identify opportunities for improvement, anticipate market trends, and develop solutions that align with the organization's goals and customer needs. In their efforts to promote an innovation-friendly environment, they implement frameworks and processes that remove barriers to creativity, making it easier for teams to brainstorm, prototype, and refine new concepts. Beyond idea generation, innovation managers ensure that these ideas are systematically evaluated and effectively executed, transforming them into tangible value propositions. This requires them to bridge the gap between visionary thinking and practical implementation, often by collaborating with cross-functional teams, securing resources, and navigating organizational dynamics. Ultimately, the work of innovation managers unlocks significant value, driving growth, enhancing customer satisfaction, and ensuring the organization remains competitive in a rapidly evolving landscape. Their dual focus on creativity and business results positions them as key drivers of sustainable innovation and long-term success.",
			simplified: "Innovation managers use creativity and business skills to promote innovation, simplify the development of new ideas, and deliver value to the organization and its customers.",
			summarized: "Innovation managers blend creativity and business skills to foster innovation, simplify idea implementation, and create value for organizations and customers."
		};

		const TIMING_CONFIG = {
			processingDelay: 3000,      // Milliseconds to simulate AI processing time
			typingSpeed: 10             // Milliseconds between each character in typing animation
		};

		// Configuration for AI action menu - customize this to add/remove AI capabilities
		const MENU_CONFIG = [
			{
				text: "Regenerate",
				action: "regenerate",
				processingLabel: "Regenerating text...",
				completedLabel: "Regenerated text",
				textKey: "en",
				replaces: "generate"
			},
			{
				text: "Fix spelling and grammar",
				action: "fixSpelling",
				processingLabel: "Fixing spelling and grammar...",
				completedLabel: "Fixed spelling and grammar",
				textKey: "en",
				startsSection: true
			},
			{
				text: "Rewrite text",
				children: [
					{ text: "Simplify", action: "simplify", processingLabel: "Simplifying text...", completedLabel: "Simplified text", textKey: "simplified" },
					{ text: "Expand", action: "expand", processingLabel: "Expanding text...", completedLabel: "Expanded text", textKey: "expanded" },
					{ text: "Summarize", action: "summarize", processingLabel: "Summarizing text...", completedLabel: "Summarized text", textKey: "summarized" }
				]
			},
			{
				text: "Make bulleted list",
				action: "bullets",
				processingLabel: "Making bulleted list...",
				completedLabel: "Made bulleted list",
				textKey: "bulleted"
			},
			{
				text: "Translate",
				children: [
					{ text: "English", action: "translateEN", processingLabel: "Translating to English...", completedLabel: "Translated to English", textKey: "en" },
					{ text: "German", action: "translateDE", processingLabel: "Translating to German...", completedLabel: "Translated to German", textKey: "de" },
					{ text: "Bulgarian", action: "translateBG", processingLabel: "Translating to Bulgarian...", completedLabel: "Translated to Bulgarian", textKey: "bg" }
				]
			}
		];

		// State management for version control and operations
		let versionHistory = [];
		let currentIndexHistory = 0;
		let currentActionInProgress = null;
		let typingInterval = null;
		let currentGenerationIndex = 0;
		let contentBeforeGeneration = "";

		const textarea = document.getElementById('ai-textarea');
		const menu = document.getElementById('ai-menu');
		const resetBtn = document.getElementById('reset-btn');
		const readonlyToggle = document.getElementById('readonly-toggle');
		const disabledToggle = document.getElementById('disabled-toggle');

		function delay(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		}

		function saveCurrentVersion() {
			if (versionHistory.length > 0 && versionHistory[currentIndexHistory]) {
				versionHistory[currentIndexHistory].value = textarea.value;
			}
		}

		function updateComponentState(versionIndex = null) {
			if (versionIndex !== null && versionHistory[versionIndex]) {
				currentIndexHistory = versionIndex;
				textarea.value = versionHistory[versionIndex].value;
			}

			textarea.currentVersion = currentIndexHistory;
			textarea.totalVersions = versionHistory.length;

			if (versionHistory[currentIndexHistory]) {
				textarea.promptDescription = versionHistory[currentIndexHistory].endAction;
			} else {
				textarea.promptDescription = "";
			}
		}

		function createMenuItem(configItem) {
			const item = document.createElement('ui5-menu-item');
			item.setAttribute('text', configItem.text || '');

			if (configItem.action) {
				item.dataset.action = configItem.action;

				if (configItem.processingLabel) {
					item.dataset.processingLabel = configItem.processingLabel;
				}

				if (configItem.completedLabel) {
					item.dataset.completedLabel = configItem.completedLabel;
				}

				if (configItem.textKey) {
					item.dataset.textKey = configItem.textKey;
				}
			}

			if (configItem.startsSection) {
				item.setAttribute('starts-section', '');
			}

			return item;
		}

		function buildMenuFromConfig() {
			const hasHistory = versionHistory.length > 0;

			menu.innerHTML = '';
			
			if (!hasHistory) {
				const generateItem = document.createElement('ui5-menu-item');
				generateItem.setAttribute('text', 'Generate text');
				generateItem.dataset.action = 'generate';
				generateItem.dataset.processingLabel = 'Generating...';
				generateItem.dataset.completedLabel = 'Generated text';
				generateItem.dataset.textKey = 'generateText';
				menu.appendChild(generateItem);
			}

			MENU_CONFIG.forEach(configItem => {
				if (configItem.replaces && !hasHistory) {
					return;
				}

				if (configItem.children && Array.isArray(configItem.children)) {
					const group = createMenuItem(configItem);
					configItem.children.forEach(child => {
						const childItem = createMenuItem(child);
						group.appendChild(childItem);
					});
					menu.appendChild(group);
				} else {
					menu.appendChild(createMenuItem(configItem));
				}
			});
		}

		function stopTypingAnimation() {
			if (typingInterval) {
				clearInterval(typingInterval);
				typingInterval = null;
			}
		}

		function completeGeneration(action, menuItem) {
			stopTypingAnimation();
			const completedLabel = (menuItem && menuItem.dataset.completedLabel) ? menuItem.dataset.completedLabel : 'Action completed';

			versionHistory.push({
				value: textarea.value,
				action,
				endAction: completedLabel,
				timestamp: new Date().toISOString()
			});

			currentIndexHistory = versionHistory.length - 1;
			currentActionInProgress = null;

			buildMenuFromConfig();
			updateComponentState();
			textarea.loading = false;
		}

		function animateTextGeneration(text, action, menuItem) {
			return new Promise(resolve => {
				const chars = text.split('');
				let i = 0;
				textarea.value = "";
				textarea.loading = true;

				typingInterval = setInterval(() => {
					if (i < chars.length) {
						textarea.value += chars[i++];
					} else {
						completeGeneration(action, menuItem);
						resolve();
					}
				}, TIMING_CONFIG.typingSpeed);
			});
		}

		function setLoadingState(promptDescription) {
			textarea.loading = true;
			textarea.value = "Analyzing request...";
			textarea.promptDescription = promptDescription || '';
		}

		function resetGenerationState() {
			stopTypingAnimation();
			currentActionInProgress = null;
			textarea.loading = false;
		}

		function findMenuItemByAction(action) {
			return menu.querySelector(`ui5-menu-item[data-action="${action}"]`);
		}

		// Main function to execute AI actions - replace the delay/sample logic with actual API calls
		async function executeAction(action) {
			if (textarea.loading) {
				return;
			}

			const menuItem = findMenuItemByAction(action);

			if (!menuItem) {
				return;
			}

			const processingLabel = menuItem.dataset.processingLabel || 'Processing...';
			const textKey = menuItem.dataset.textKey || 'en';

			saveCurrentVersion();
			contentBeforeGeneration = textarea.value;
			currentActionInProgress = action;
			currentGenerationIndex += 1;
			const generationIdForThisRun = currentGenerationIndex;

			setLoadingState(processingLabel);

			// Replace this delay with actual API call
			await delay(TIMING_CONFIG.processingDelay);

			if (!textarea.loading || generationIdForThisRun !== currentGenerationIndex) {
				resetGenerationState();
				return;
			}

			const text = SAMPLE_TEXTS[textKey] || SAMPLE_TEXTS.en;
			await animateTextGeneration(text, action, menuItem);
		}

		function stopGeneration() {
			if (!textarea.loading) {
				return;
			}

			stopTypingAnimation();
			currentGenerationIndex += 1;
			
			// Restore the previous content instead of saving the cancelled action
			textarea.value = contentBeforeGeneration;
			currentActionInProgress = null;
			textarea.loading = false;
			textarea.promptDescription = "";

			updateComponentState();
		}

		function handleVersionChange(event) {
			const { backwards } = event.detail || {};

			if (backwards && currentIndexHistory > 0) {
				saveCurrentVersion();
				updateComponentState(currentIndexHistory - 1);
			} else if (!backwards && currentIndexHistory < versionHistory.length - 1) {
				saveCurrentVersion();
				updateComponentState(currentIndexHistory + 1);
			}
		}

		async function handleMenuItemClick(event) {
			const action = event?.detail?.item?.dataset?.action;

			if (!action) {
				return;
			}

			await executeAction(action);
		}

		function handleStopGeneration() {
			stopGeneration();
		}

		function handleKeydown(event) {
			if (event.key === 'Escape' && textarea.loading) {
				event.preventDefault();
				stopGeneration();
			}
		}

		function resetDemo() {
			stopGeneration();
			
			versionHistory = [];
			currentIndexHistory = 0;
			currentGenerationIndex = 0;
			currentActionInProgress = null;
			contentBeforeGeneration = "";
			
			textarea.value = "Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture.";
			textarea.loading = false;
			textarea.promptDescription = '';
			textarea.currentVersion = 0;
			textarea.totalVersions = 0;

			buildMenuFromConfig();
		}

		function toggleReadonly() {
			textarea.readonly = !textarea.readonly;
			readonlyToggle.textContent = textarea.readonly ? 'Enable Editing' : 'Toggle Readonly';
		}

		function toggleDisabled() {
			textarea.disabled = !textarea.disabled;
			disabledToggle.textContent = textarea.disabled ? 'Enable Component' : 'Toggle Disabled';
		}

		function initDemo() {
			buildMenuFromConfig();

			menu.addEventListener('item-click', handleMenuItemClick);
			textarea.addEventListener('version-change', handleVersionChange);
			textarea.addEventListener('stop-generation', handleStopGeneration);			
			document.addEventListener('keydown', handleKeydown);
			
			// Prevent memory leaks on page unload
			window.addEventListener('beforeunload', () => {
				stopTypingAnimation();
				resetGenerationState();
			});
			
			resetBtn.addEventListener('click', resetDemo);
			readonlyToggle.addEventListener('click', toggleReadonly);
			disabledToggle.addEventListener('click', toggleDisabled);
		}

		document.addEventListener('DOMContentLoaded', initDemo);
	</script>
</body>

</html>
